<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-26 15:16:08
 * @LastEditTime: 2020-08-18 19:03:23
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div id="app">
    <transition :name="fadeName">
      <keep-alive :include="keeplist">
        <router-view></router-view>
      </keep-alive>
    </transition>
  </div>
</template>
<script>
export default {
    data() {
        return {
            fadeName: "slide-left",
            keeplist: ["keepAlive", "Index"]
        };
    },
    watch: {
        $route(next, prev) {
            // 如果跳向主页面则right,不是则left
            if(prev.fullPath == "/" && next.meta.isMainPage){
                this.fadeName = "van-fade";
                return
            }
            if (next.fullPath == "/" || next.meta.isMainPage) {
                this.fadeName = "slide-right";
            } else {
                this.fadeName = "slide-left";
            }
        }
    }
};
</script>
<style lang="less">
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.van-nav-bar--fixed {
    z-index: 1000 !important;
    height: 50px;
    line-height: 50px;
    box-shadow: 0 0px 10px 1px rgba(0, 0, 0, 0.1);
}
html,
body,
#app {
    width: 100%;
    height: 100%;
    font-family: "Avenir", Helvetica, Arial, sans-serif;
}
input[type="number"] {
    -moz-appearance: textfield;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.container {
    width: 100%;
    height: 100%;
    padding-top: 88px;
    box-sizing: border-box;
    overflow: auto;
}
// 从右向左过度
.slide-right-enter {
    transform: translateX(-100vw);
}
.slide-right-leave-to {
    transform: translateX(100vw);
}

.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
    position: absolute;
    top: 0;
    width: 100vw;
    height: 100vh;
    transition: all 0.3s;
}

// 从左向右过度
.slide-left-enter {
    transform: translateX(100vw);
}
.slide-left-leave-to {
    transform: translateX(-100vw);
}
</style>
